<div id="root">

    <qf-nav-bar title="商品创建"></qf-nav-bar>
    
    <h1>表单组件</h1>
    <qf-table :state="false" ref="a"></qf-table>
    <qf-table :state="false" ref="b"></qf-table>
    <qf-table :state="false" ref="c"></qf-table>
    <qf-table :state="false" ref="d"></qf-table>

    <br><br>
    <hr>
    <button @click="submitFn">表单组件外面的按钮，点击请求接口</button>

    <h1>tips提示框</h1>
    <qf-tips><h1>账号密码有误</h1></qf-tips>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script src="./qfui.js"></script>
<script>
const vm = new Vue({
    el: "#root",
    data: {
    },
    methods: {
        // submitFn(account, password) {
        //     console.log(account, password)
        // submitFn(formData) {
        //     console.log('表单数据：',formData)
        submitFn() {
            console.log('表单数据：')
            console.log(this.$refs.a.formData)
            console.log(this.$refs.b.formData)
            console.log(this.$refs.c.formData)
            console.log(this.$refs.d.formData)
            alert('商品创建请求接口伪代码...')
        }
    }
})
</script>